<template>
	<view class="mains">
		<view class="headers" v-for="item in list" :key="item.id">
				<view class="touxiang">
					<image :src="item.shop_urls"></image>
				</view>
				<view class="jieshao">
					<div>
						<h3>{{item.shop_name}}</h3>
					</div>
					<div>
						<p>店主：{{item.true_name}}</p>
					</div>
					<div>
						<p>电话：{{item.tel}}</p>
					</div>
				</view>
				<view class="xiaoshoue"  @click="SETshopid(item.id)">
					<div class="money">
						总销售额度：<span>￥{{item.money || 0}}</span>
					</div>
				</view>
		</view>
		<u-loadmore :status="status" icon-type="iconType" :load-text="loadText" />
			<!-- <u-popup v-model="show" mode="center" width="100rpx" height="100rpx">
					<view>已经加载完了啊</view>
				</u-popup> -->
				<u-toast ref="uToast" />
				<u-toast ref="upToast" />
			<!-- <u-modal v-model="show" :content="content"></u-modal> -->

	</view>
</template>

<script>
	export default {
		data(){
			return {
				list2:[],
				show:false,
				iconType: 'flower',
				content: '已经加载完毕了哦',
				page:1,
				limit:10,
				agent_id:"",
				status: 'loadmore',
				loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
				},
				jiazai:true,
				list:[]
			}
		},
		
		onLoad() {
			var that=this
			wx.showLoading({
				  title: '加载中',
				  success(){
					  that.getdata()
					  setTimeout(function () {
					    wx.hideLoading()
					  }, 1000)
				  }
				})
			
		},
		methods:{
			SETshopid(x){
				wx.setStorage({
				  key:"shop_id",
				  data:x,
				})
				wx.navigateTo({
					url:"/pages/shop/index"
				})
			},
			getdata(){
				var that=this
				wx.getStorage({
				  key:'agent_id',
				  success (res) {
					 that.agent_id=res.data
					 that.$flyio.get('v1.Shop/getAgentShopList', {
					 		agent_id: res.data,
					 		page: that.page,
					 		limit: 10,
					 	}).then((res) => {
					 		console.log(res.data)
					 		that.list=res.data
							uni.stopPullDownRefresh();
					 	})
					 	.catch((e) => {
					 		console.log(e)
					 	})
				  }
				})
				console.log("获取默认列标前")
			}
		},
		onPullDownRefresh() {
				this.$refs.upToast.show({
					title: '重新加载中',
					type: 'success',
				})
				this.page=1
				this.getdata();
			},
		onReachBottom(e) {
				if(this.jiazai==false){
					return
				}
					var that=this
					console.log('触底加载更多');
					that.page++
					// that.limit=that.limit+10
					// console.log(that.limit)
					// console.log(that.page)
					this.status = 'loading';
					
					that.$flyio.get('v1.Shop/getAgentShopList', {
							agent_id:that.agent_id,
							page: that.page,
							limit: 10,
						}).then((res) => {
							    console.log("下拉列表")
								// console.log(res)
								console.log(res.data)
								if(res.data.length==0){
									that.jiazai=false
									setTimeout(() => {
										that.status = 'nomore';
									}, 2000)
									that.$refs.uToast.show({
										title: '成功加载更多',
										type: 'success',
									})
								}
								that.list=[...that.list,...res.data]
							uni.stopPullDownRefresh();
						})
						.catch((e) => {
							console.log(e)
						})
				},
				onReady() {
					
				}
	}
</script>

<style scoped="scoped" lang="scss">
	span{
		color: $red;
	}
	.mains{
		
		// height: 100%;
		background-color: #F1F1F1;
	}
	p{
		font-size: 24upx;
	}
	.headers {
		// padding: 0 20upx;
		background-color: #FFFFFF;
		// height: 230upx;
		h3 {
			font-size: 30upx;
		}
		// border-bottom: 1px solid #ffffff;
		margin-bottom: 17upx;
		// background-color: green;
		align-items: center;
		font-size: 24upx;
		height: 227upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: left;
		p {
			color: lightslategray;
		}
		.touxiang {
			margin-left: 20upx;
			image {
				background-color: gainsboro;
				border-radius: 50%;
				width: 150upx;
				height: 150upx;
	
			}
		}
		.jieshao {
			padding-left:20upx ;
			width: 316upx;
			// background-color: red;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 150upx;
		}
	
		.xiaoshoue {
			flex: 1;
			height: 150upx;
			// margin-right: 20upx;
			// line-height: 132upx;
			// background-color: red;
			color: #999999;
			
			.money{
				height: 30upx;
				width: 100%;
				// background-color: green;
				
			}
			.red{
				color: red;
			}
		}
	}
	
</style>
